<!doctype html>

<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>我叫康健，终结或许也是一个开始！</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="apple-touch-icon" href="apple-touch-icon.png">

		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="css/templatemo-style.css">
		<link rel="stylesheet" type="text/css" href="css/mplayer.css" />

		<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
	</head>
	<style type="text/css">
		.mp {
			z-index: 2;
		}
		
		.mp-lrc {
			z-index: 0 !important;
		}
		
		.im img {
			height: 400px !important;
		}
		#result{
 
}
	</style>

	<body  onload="showTime()">
		<!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
		<nav class="nav">
			<div class="burger">
				<div class="burger__patty"></div>
			</div>

			<ul class="nav__list">
				<li class="nav__item">
					<a href="#1" class="nav__link c-blue"><img src="img/home-icon.png" alt=""></a>
				</li>
				<li class="nav__item">
					<a href="#2" class="nav__link c-yellow scrolly"><img src="img/about-icon.png" alt=""></a>
				</li>
				<li class="nav__item">
					<a href="#3" class="nav__link c-red"><img src="img/projects-icon.png" alt=""></a>
				</li>
				<li class="nav__item">
					<a href="#4" class="nav__link c-green"><img src="img/contact-icon.png" alt=""></a>
				</li>
				<li class="nav__item">
					<a href="#5" class="nav__link c-green"><img src="img/ai.png" alt=""></a>
				</li>
				<li class="nav__item">
					<a href="#6" class="nav__link c-green"><img src="img/wu.png" /></a>
				</li>
			</ul>
		</nav>

		<section class="panel b-blue" id="1">
			<article class="panel__wrapper">
				<div class="panel__content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="home-content">
									<div class="home-heading">
										<h1><em>康健</em> HTML CSS</h1>
									</div>
									<div class="row">
										<div class="col-md-12">
											<div class="home-box-content">
												<div class="left-text">
													<h4>Thats <em>What</em> I Am</h4>
													<p>
														<a href="#" target="_blank">我叫康健</a>.今年20岁，爱好是听歌和看电影，这或许和大多数同龄人的爱好相同，但或许的只是爱好，我认为我比周围的同龄人更加会用心做事，用心对待自己想要到达的目标。</p>
													<div class="primary-button">
														<a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1584867751&website=www.oicqzone.com">加qq？</a>
													</div>
												</div>
												<div class="right-image">
													<img src="img/me.png" alt="">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</article>
		</section>
		
		<section class="panel b-yellow" id="2">
			<article class="panel__wrapper">
				<div class="panel__content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="about-content">
									<div class="heading">
										<h4>我的梦想</h4>
									</div>
									<div class="row">
										<div class="col-md-12">
											<div class="about-box-content">
												<img src="img/about-image.png" alt="">
											</div>
										</div>
										<div class="col-md-7 col-md-offset-5">
											<div class="about-box-text">
												<h4>As one</h4>
												<p>人生没有梦想就像航海没有指南针，我们乘着梦想的翅膀，踏上了为梦想而奋斗的旅程，在实现梦想的路上，有一些事是艰苦的，有一些事是快乐的。而我的梦想是在编写程序中可以大显身手。</p>
												<div class="primary-button">
													<a href="#3">Discover More</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</article>
		</section>
		<section class="panel b-red" id="3">
			<article class="panel__wrapper">
				<div class="panel__content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="projects-content">
									<div class="heading">
										<h4>生活其实可以很多彩</h4>
									</div>
									<div class="row">
										<div class="col-md-12">
											<div class="owl-carousel owl-theme projects-container im">
												<div>
													<div class="project-item">
														<a href="img/item1.jpg" data-lightbox="image-1"><img src="img/item1.jpg" alt=""></a>
														<div class="text-content">
															<h4>one</h4>
															<p>和世界交手的这许多年，你是否光彩依旧，兴致盎然。</p>
															<div class="primary-button">
																<a href="img/item1.jpg" data-lightbox="image-1">count on me</a>
															</div>
														</div>
													</div>
												</div>
												<div>
													<div class="project-item">
														<a href="img/item2.jpg" data-lightbox="image-1"><img src="img/item2.jpg" alt=""></a>
														<div class="text-content">
															<h4>two</h4>
															<p><br>醉后不知天在水，满船清梦压星河。</p>
															<div class="primary-button">
																<a href="img/item2.jpg" data-lightbox="image-1">count on me</a>
															</div>
														</div>
													</div>
												</div>
												<div>
													<div class="project-item">
														<a href="img/item3.jpg" data-lightbox="image-1"><img src="img/item3.jpg" alt=""></a>
														<div class="text-content">
															<h4>three</h4>
															<p>后来我终于知道 ， 它并不是我的花 ，我只是恰好途径了它的盛放。</p>
															<div class="primary-button">
																<a href="img/item3.jpg" data-lightbox="image-1">count on me</a>
															</div>
														</div>
													</div>
												</div>
												<div>
													<div class="project-item">
														<a href="img/item4.jpg" data-lightbox="image-1"><img src="img/item4.jpg" alt=""></a>
														<div class="text-content">
															<h4>four</h4>
															<p>是谁来自山川湖海，却囿于昼夜、厨房与爱。</p>
															<div class="primary-button">
																<a href="img/item4.jpg" data-lightbox="image-1">count on me</a>
															</div>
														</div>
													</div>
												</div>
												<div>
													<div class="project-item">
														<a href="img/item5.jpg" data-lightbox="image-1"><img src="img/item5.jpg" alt=""></a>
														<div class="text-content">
															<h4>five</h4>
															<p><br>陌上花开，可缓缓归矣。</p>
															<div class="primary-button">
																<a href="img/item5.jpg" data-lightbox="image-1">count on me</a>
															</div>
														</div>
													</div>
												</div>
												<div>
													<div class="project-item">
														<a href="img/item6.jpg" data-lightbox="image-1"><img src="img/item6.jpg" alt=""></a>
														<div class="text-content">
															<h4>six</h4>
															<p>我亦只有一个一生，无法慷慨赠予我不爱的人。</p>
															<div class="primary-button">
																<a href="img/item6.jpg" data-lightbox="image-1">count on me</a>
															</div>
														</div>
													</div>
												</div>
												<div>
													<div class="project-item">
														<a href="img/item7.jpg" data-lightbox="image-1"><img src="img/item7.jpg" alt=""></a>
														<div class="text-content">
															<h4>seven</h4>
															<p>答案很长，我准备用一生的时间来回答，你准备要听了吗？</p>
															<div class="primary-button">
																<a href="img/item7.jpg" data-lightbox="image-1">count on me</a>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</article>
		</section>
		<section class="panel b-green" id="4">
			<article class="panel__wrapper">
				<div class="panel__content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="contact-content">
									<div class="heading">
										<h4>与我联系</h4>
									</div>
									<div class="row">
										<div class="col-md-8">
											<div class="contat-form">
												<form id="contact" action="" method="post">
													<fieldset>
														<input name="name" type="text" class="form-control" id="name" placeholder="Your Name" required="">
													</fieldset>
													<fieldset>
														<input name="email" type="email" class="form-control" id="email" placeholder="Email" required="">
													</fieldset>
													<fieldset>
														<textarea name="message" rows="6" class="form-control" id="message" placeholder="Message" required=""></textarea>
													</fieldset>
													<fieldset>
														<button type="submit" id="form-submit" class="btn">发送</button>
													</fieldset>
												</form>
											</div>
										</div>
										<div class="col-md-4">
											<div class="more-info">
												<p>意见建议发给我<br><br>
													<em>现在是,
								<br><div id="result"></div></em></p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="footer">
									<p>时光如梭 岁月荏苒 2013 We get to know each other | we together
										<a href="#" target="_blank" title="lsy">不畏将来</a> And
										<a href="#">不念过往</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</article>
		</section>

		<section class="panel b-green" id="5">
			<article class="panel__wrapper">
				<div class="panel__content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="contact-content">
									<div class="heading">
										<h4>问卷</h4>
									</div>
									<div class="row">
										<div class="col-md-12">
											<div class="contat-form" style="height: 600px;width: 720px;background: rgba(250, 250, 250, 0);">
												<iframe align="center" width="100%" height="100%" src="answer/index.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

											</div>
										</div>

									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="footer">
									<p>时光如梭 岁月荏苒 2013 We get to know each other | we together
										<a href="#" target="_blank" title="lsy">不畏将来</a> And
										<a href="#" title="网页模板" target="_blank">不念过往</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</article>
		</section>

		<section class="panel b-green" id="6">
			<article class="panel__wrapper">
				<div class="panel__content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="contact-content">
									<div class="heading" style="padding-top: 10% !important;">
										<h4>注册</h4>
									</div>
									<div class="row">
										<div class="col-md-12">
											<div class="contat-form" style="height: 800px;width: 720px;background: rgba(250, 250, 250, 0);">
												<iframe align="center" width="100%" height="100%" src="注册/newuser.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

											</div>
										</div>

									</div>
								</div>
							</div>
							<div class="col-md-12">
								<div class="footer">
									<p>时光如梭 岁月荏苒 2013 We get to know each other | we together
										<a href="#" target="_blank" title="lsy">不畏将来</a> And
										<a href="#" title="" target="_blank">不念过往</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</article>
		</section>
		<div class="mp">
			<div class="mp-box">
				<img src="img/mplayer_error.png" alt="music cover" class="mp-cover">
				<div class="mp-info">
					<p class="mp-name"></p>
					<p class="mp-singer"></p>
					<p><span class="mp-time-current">00:00</span>/<span class="mp-time-all">00:00</span></p>
				</div>
				<div class="mp-btn">
					<button class="mp-prev" title="上一首"></button>
					<button class="mp-pause" title="播放"></button>
					<button class="mp-next" title="下一首"></button>
					<button class="mp-mode" title="播放模式"></button>
					<div class="mp-vol">
						<button class="mp-vol-img" title="静音"></button>
						<div class="mp-vol-range" data-range_min="0" data-range_max="100" data-cur_min="80">
							<div class="mp-vol-current"></div>
							<div class="mp-vol-circle"></div>
						</div>
					</div>
				</div>
				<div class="mp-pro">
					<div class="mp-pro-current"></div>
				</div>
				<div class="mp-menu">
					<button class="mp-list-toggle"></button>
					<button class="mp-lrc-toggle"></button>
				</div>
			</div>
			<button class="mp-toggle">
		<span class="mp-toggle-img"></span>
	</button>

			<button class="mp-lrc-close"></button>
			<div class="mp-list-box">
				<ul class="mp-list-title"></ul>
				<table class="mp-list-table">
					<thead>
						<tr>
							<th>歌名</th>
							<th>歌手</th>
							<th>时长</th>
						</tr>
					</thead>
					<tbody class="mp-list"></tbody>
				</table>
			</div>
		</div>

	
		<script src="js/jquery-2.1.1.js"></script>
		<script>
			window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
		</script>

		<script src="js/vendor/bootstrap.min.js"></script>

		<script src="js/plugins.js"></script>
		<script src="js/main.js"></script>

		<script src="js/mplayer.js"></script>
		<script src="js/mplayer-list.js"></script>
		<script src="js/mplayer-functions.js"></script>
		<script src="js/jquery.nstSlider.min.js"></script>
		<script>
			var modeText = ['顺序播放', '单曲循环', '随机播放', '列表循环'];
			var player = new MPlayer({
				// 容器选择器名称
				containerSelector: '.mp',
				// 播放列表
				songList: mplayer_song,
				// 专辑图片错误时显示的图片
				defaultImg: 'img/mplayer_error.png',
				// 自动播放
				autoPlay: true,
				// 播放模式(0->顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认))
				playMode: 0,
				playList: 0,
				playSong: 0,
				// 当前歌词距离顶部的距离
				lrcTopPos: 34,
				// 列表模板，用${变量名}$插入模板变量
				listFormat: '<tr><td>${name}$</td><td>${singer}$</td><td>${time}$</td></tr>',
				// 音量滑块改变事件名称
				volSlideEventName: 'change',
				// 初始音量
				defaultVolume: 80
			}, function() {
				// 绑定事件
				this.on('afterInit', function() {
					console.log('播放器初始化完成，正在准备播放');
				}).on('beforePlay', function() {
					var $this = this;
					var song = $this.getCurrentSong(true);
					var songName = song.name + ' - ' + song.singer;
					console.log('即将播放' + songName + '，return false;可以取消播放');
				}).on('timeUpdate', function() {
					var $this = this;
					
				}).on('end', function() {
					var $this = this;
					var song = $this.getCurrentSong(true);
					var songName = song.name + ' - ' + song.singer;
					console.log(songName + '播放完毕，return false;可以取消播放下一曲');
				}).on('mute', function() {
					var status = this.getIsMuted() ? '已静音' : '未静音';
					console.log('当前静音状态：' + status);
				}).on('changeMode', function() {
					var $this = this;
					var mode = modeText[$this.getPlayMode()];
					$this.dom.container.find('.mp-mode').attr('title', mode);
					console.log('播放模式已切换为：' + mode);
				});
			});

			$(document.body).append(player.audio); // 测试用

			setEffects(player);
			
			//定义函数：构建要显示的时间日期字符串
function showTime()
{
 //创建Date对象
 var today = new Date();
 //分别取出年、月、日、时、分、秒
 var year = today.getFullYear();
 var month = today.getMonth()+1;
 var day = today.getDate();
 var hours = today.getHours();
 var minutes = today.getMinutes();
 var seconds = today.getSeconds();
 //如果是单个数，则前面补0
 month  = month<10  ? "0"+month : month;
 day  = day <10  ? "0"+day : day;
 hours  = hours<10  ? "0"+hours : hours;
 minutes = minutes<10 ? "0"+minutes : minutes;
 seconds = seconds<10 ? "0"+seconds : seconds;
  
 //构建要输出的字符串
 var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
  
 //获取id=result的对象
 var obj = document.getElementById("result");
 //将str的内容写入到id=result的<div>中去
 obj.innerHTML = str;
 //延时器
 window.setTimeout("showTime()",1000);
}
		</script>
	</body>

</html>